Jassif Team Institution

AngularJS AJAX - $http

$http என்பது தொலை தரவு சேவையகங்களில் இருந்து தரவுகளைப் படிக்க AngularJS வழங்கும் ஒரு சேவையாகும்.

AngularJS $http

AngularJS $http சேவை சேவையகத்திற்கு கோரிக்கையை அனுப்பி, பதிலைத் திரும்பப் பெறுகிறது.

உதாரணம்

சேவையகத்திற்கு எளிய கோரிக்கையை அனுப்பி, முடிவை தலைப்பில் காண்பிக்கவும்:

<div ng-app="myApp" ng-controller="myCtrl">

<p>இன்றைய வரவேற்பு செய்தி:</p>
<h1>{{myWelcome}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm")
  .then(function(response) {
    $scope.myWelcome = response.data;
  });
});
</script>

முறைகள்

மேலே உள்ள உதாரணம் $http சேவையின் .get முறையைப் பயன்படுத்துகிறது.

.get முறை $http சேவையின் குறுகிய முறையாகும்.

பல குறுகிய முறைகள் உள்ளன:

• .delete()
• .get()
• .head()
• .jsonp()
• .patch()
• .post()
• .put()

மேலே உள்ள முறைகள் அனைத்தும் $http சேவையை அழைப்பதன் குறுகிய வழிகளாகும்:

உதாரணம்

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http({
    method : "GET",
    url : "welcome.htm"
  }).then(function mySuccess(response) {
    $scope.myWelcome = response.data;
  }, function myError(response) {
    $scope.myWelcome = response.statusText;
  });
});

மேலே உள்ள உதாரணம் ஒரு பொருளை வாதமாகப் பயன்படுத்தி $http சேவையை செயல்படுத்துகிறது.

இந்த பொருள் HTTP முறை, URL, வெற்றியடைந்தால் என்ன செய்ய வேண்டும் மற்றும் தோல்வியடைந்தால் என்ன செய்ய வேண்டும் என்பதைக் குறிப்பிடுகிறது.

பண்புகள்

சேவையகத்திலிருந்து வரும் பதில் பின்வரும் பண்புகளைக் கொண்ட ஒரு பொருளாகும்:

• .config - கோரிக்கையை உருவாக்க பயன்படுத்தப்படும் பொருள்
• .data - சேவையகத்திலிருந்து வரும் பதிலைக் கொண்ட ஒரு சரம் அல்லது பொருள்
• .headers - தலைப்பு தகவலைப் பெற பயன்படுத்த வேண்டிய செயல்பாடு
• .status - HTTP நிலையை வரையறுக்கும் எண்
• .statusText - HTTP நிலையை வரையறுக்கும் சரம்

உதாரணம்

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm")
  .then(function(response) {
    $scope.content = response.data;
    $scope.statuscode = response.status;
    $scope.statustext = response.statusText;
  });
});

பிழைகளைக் கையாள, .then முறையில் இன்னும் ஒரு செயல்பாட்டைச் சேர்க்கவும்:

உதாரணம்

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("wrongfilename.htm")
  .then(function(response) {
    // முதல் செயல்பாடு வெற்றியைக் கையாளுகிறது
    $scope.content = response.data;
  }, function(response) {
    // இரண்டாவது செயல்பாடு பிழையைக் கையாளுகிறது
    $scope.content = "ஏதோ தவறு நடந்தது";
  });
});

JSON

பதிலிலிருந்து பெறும் தரவு JSON வடிவத்தில் இருக்கும் என்று எதிர்பார்க்கப்படுகிறது.

JSON என்பது தரவைக் கொண்டு செல்ல சிறந்த வழியாகும், மேலும் இது AngularJS அல்லது வேறு எந்த JavaScript இலும் பயன்படுத்த எளிதானது.

உதாரணம்:

சேவையகத்தில் 15 வாடிக்கையாளர்களைக் கொண்ட JSON பொருளைத் திரும்பத் தரும் ஒரு கோப்பு உள்ளது, இவை அனைத்தும் records என்ற அணியில் பொதியப்பட்டுள்ளன.

JSON பொருளைப் பார்க்க இங்கே கிளிக் செய்யவும்.

உதாரணம்

ng-repeat உத்தரவு ஒரு அணியின் வழியாகச் சுழல்வதற்கு சிறந்தது:

<div ng-app="myApp" ng-controller="customersCtrl">

<ul>
  <li ng-repeat="x in myData">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("customers.php").then(function(response) {
    $scope.myData = response.data.records;
  });
});
</script>

பயிற்சி

கீழே உள்ள பயிற்சியில் $http சேவையைப் பற்றிய உங்கள் புரிதலை சோதிக்கவும்: